@<template>
  <div class="content flex-five">
    <!-- 左边导航 -->
    <div class="nav-left">
      <Left />
    </div>
    <!-- 右边 -->
    <div class="right">
      <!--右边顶部内容 -->
      <div>
        <Top />
      </div>

      <!-- 右边下面部分的路由站位符 -->
      <div class="router-z">
        <router-view />
      </div>
    </div>
  </div>
</template>


<script>
import Left from "../components/Content/Left.vue";
import Top from "../components/Content/Top.vue";

export default {
  name: "Content",
  components: {
    Left,
    Top,
  },
  data() {
    return {
      // contentHeight: 0,
    };
  },
  mounted() {
    // this.setHeight();
  },
  methods: {
    // setHeight() {
    //   // console.log(window.screen.availHeight);
    //   this.contentHeight = window.screen.availHeight - 120;
    //   console.log(this.contentHeight)
    // },
  },
};
</script>

<style scoped lang="less">
.content {
  height: 100%;
  .nav-left {
    height: 100%;
    box-shadow: 3px 0px 4px #9f98a7;
    z-index: 100;
  }
  .right {
    flex: 1;
    overflow-y: auto;
    .router-z {
      background-color: #fff;
      margin: 10px 10px;
      height: 100%;
      border-radius: 8px;
    }
  }
}
</style>